<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mycommon.css" />
		<link rel="stylesheet" href="../css/templet.css" />
		<link rel="stylesheet" href="css/Register.css" />
	</head>

	<body>
		<div id="bodyapp" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">{{Language["1137"]}}</h1>
			</header>
			<div class="l-content">
				<div id="register-box" class="mui-input-group">
					<div class="l-input-row">
						<label>{{Language["1020"]}}</label>
						<input class="required l-input-clear" type="text" data-valid="isNonEmpty" v-model="froms.name" :data-error="Language[1122]" type="text" :placeholder="Language[1127]" />
					</div>
					<div class="l-input-row">
						<label>{{Language["1021"]}}</label>
						<input id="pwd" type="password" class="l-input-clear required" data-valid="isNonEmpty"  :placeholder="Language[1003]" :data-error="Language[1123]">
					</div>
					<div class="l-input-row">
						<label>{{Language["1021"]}}</label>
						<input data-valid="matchPwd" data-matchID="pwd" type="password" class="l-input-clear required"  :placeholder="Language[1003]" :data-error="Language[1123]">
					</div>
					<div class="error-box pad-t-10 red" id="errortip">
						<span class="mag-r-5"><i class="fa fa-exclamation-circle"></i></span>
					</div>
					<div class="mui-button-row">
						<button type="button" v-on:click="sub_form" class="mui-btn mui-btn-danger">{{Language["1017"]}}</button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/ajax.js"></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/jquery-validate.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="js/Register.js"></script>
		<script>
			(function($) {
				$.init();
				var btns = $('#demo2');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function(rs) {
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								$('#demo2')[0].value = rs;
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}

					}, false);
				});
			})(mui);
		</script>
	</body>

</html>